<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="/html/axios.min.js"></script>
<script src="/html/util.js"></script>
<script>
    var id = getQuery("id")
    window.onload = function (){
        showProduct();
    }

    function  showProduct(){
        axios.get("/product/findById",{
            params:{
                id
            }
        }).then(e => {
            var info = e.data;
            $('productImg').src = "/html/img/"+info.imgPath;
            $('nameSpan').innerHTML = info.name;
            $('priceSpan').innerHTML = info.price;

            var str = "";
            for (var i=0;i<info.speakList.length;i++){
                var obj = info.speakList[i];
                str += `<tr><td>${obj.user.name}</td>
                        <td>${obj.contend}</td>
                        <td>${obj.speakDate}</td></tr>`
            }
            $('speakData').innerHTML = str;
        })
    }

    function addSpeak(){
        axios.get("/speak/add",{
            params: {
                id:id,
                content:$('content').value,
            }
        }).then(e => {
            if (e.data == "ok"){
                showProduct();
            }else {
                location.href = "/html/login.html?errorLogin=no"
            }
        })
    }
</script>
<body>
    <h2>商品详细信息</h2>
    <img src="" id="productImg" width="200" height="200"><br>
    商品名:<span id="nameSpan"></span><br>
    单价:<span id="priceSpan"></span><br>

    评论:
    <table border="1" cellspacing="0" width="60%">
        <thead>
            <tr><th>评论人</th><th>评论内容</th><th>评论时间</th></tr>
        </thead>
        <tbody id="speakData"></tbody>
    </table>
    评论:<input type="text" id="content"><br>
    <input type="button" value="提交" onclick="addSpeak()">
</body>
</html>